<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 饮食营养管理系统</title>
    <!-- TailwindCSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app" class="min-h-screen flex flex-col">
        <div class="flex items-center justify-center min-h-screen bg-gray-50">
            <div class="w-full max-w-md">
                <!-- 登录卡片 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <!-- 顶部标题区域 -->
                    <div class="bg-emerald-600 text-white px-6 py-4">
                        <div class="flex items-center justify-center space-x-2">
                            <i class="fas fa-leaf text-2xl"></i>
                            <h1 class="text-xl font-bold">营养师后台管理系统</h1>
                        </div>
                    </div>

                    <!-- 登录表单 -->
                    <div class="p-6">
                        <h2 class="text-xl font-semibold text-gray-800 text-center mb-6">管理员登录</h2>
                        
                        <!-- 用户名输入 -->
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-medium mb-2" for="username">
                                用户名
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-user text-gray-400"></i>
                                </span>
                                <input id="username" type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                                    placeholder="请输入用户名" v-model="username">
                            </div>
                        </div>
                        
                        <!-- 密码输入 -->
                        <div class="mb-6">
                            <label class="block text-gray-700 text-sm font-medium mb-2" for="password">
                                密码
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </span>
                                <input id="password" type="password" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
                                    placeholder="请输入密码" v-model="password">
                                <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3" @click="togglePasswordVisibility">
                                    <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="text-gray-400"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 记住我 & 忘记密码 -->
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center">
                                <input id="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded" v-model="rememberMe">
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">
                                    记住我
                                </label>
                            </div>
                            <a href="#" class="text-sm text-emerald-600 hover:text-emerald-800">忘记密码?</a>
                        </div>
                        
                        <!-- 登录按钮 -->
                        <div class="mb-4">
                            <button @click="login" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition duration-150 ease-in-out">
                                <i class="fas fa-sign-in-alt mr-2"></i>登录
                            </button>
                        </div>
                        
                        <!-- 错误提示 -->
                        <div v-if="loginError" class="mb-4 p-3 bg-red-50 text-red-700 rounded-md text-sm flex items-start">
                            <i class="fas fa-exclamation-circle mt-0.5 mr-2"></i>
                            <span>{{ loginError }}</span>
                        </div>
                    </div>
                    
                    <!-- 底部版权信息 -->
                    <div class="bg-gray-50 px-6 py-4 text-center text-xs text-gray-500">
                        <p>&copy; 2023 健康饮食营养管理系统 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    username: '',
                    password: '',
                    rememberMe: false,
                    showPassword: false,
                    loginError: '',
                };
            },
            methods: {
                togglePasswordVisibility() {
                    this.showPassword = !this.showPassword;
                    const passwordInput = document.getElementById('password');
                    passwordInput.type = this.showPassword ? 'text' : 'password';
                },
                login() {
                    // 重置错误信息
                    this.loginError = '';
                    
                    // 简单的表单验证
                    if (!this.username.trim()) {
                        this.loginError = '请输入用户名';
                        return;
                    }
                    
                    if (!this.password) {
                        this.loginError = '请输入密码';
                        return;
                    }
                    
                    // 模拟登录请求成功后跳转到首页
                    // 在实际应用中，这里应该发送登录请求到服务器
                    if (this.username === 'admin' && this.password === 'admin') {
                        // 登录成功，跳转到首页
                        window.location.href = 'index.html';
                    } else {
                        // 登录失败，显示错误信息
                        this.loginError = '用户名或密码错误，请重试';
                    }
                }
            }
        });
        
        app.mount('#app');
    </script>
</body>
</html> 